﻿
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<style>
    body {
        background-image: url('../../img/2109251T94K638-0-lp.jpg');
        width: 100%;
        
    }
    .dayemian {
        /*background-repeat:no-repeat;*/
        height: 3000px;
        width: 1200px;
        background-color: whitesmoke;
        padding: 40px;
        position:relative;
    }

    .yemianbeijing {
       
        top: 200px;
    }

    .head { /*头部样式*/
        float: right;
        box-shadow:0px 0px 14px #88888888;
        position: relative;
        background-color: aliceblue;
        margin-top:120px;
        margin-right:10px;
        background-color: floralwhite;
        border-radius:10px;
    }

        .head p {
            text-align: center;
        }

        .head h3 {
            text-align: center;
        }

    .sing { /*注册按钮*/
        color: aqua;
        height: 40px;
        width: 120px;
        font-size: 15px;
        font-weight: 100;
        border-radius: 10px;
    }

    .zhu { /* 登录按钮*/
        color: brown;
        height: 40px;
        width: 120px;
        font-size: 15px;
        font-weight: 100;
        border-radius: 10px;
        float: right;
        left: 3px;
        position: relative;
    }

    .ta {
        width: 300px;
        text-align: center;
        background-color: aqua;
        position: relative;
        float: left;
        left: 400px;
        border-radius: 10px;
    }
    /*底部*/
    .zui-1 {
        Border-color: gainsboro;
        width: 100%;
        height: 900px;
        margin: 0;
        position: relative;
        top: 350px;
    }

    .di .shi .zan {
        width: 300px;
        background-color: beige;
        border-width: 100px;
        height: 100%;
        font-size: 15px;
    }

    .zui-2 {
        Border-color: white;
        width: 200px;
        height: 150px;
        display: inline-block;
        position: relative;
        left: 250px;
        bottom: 340px;
    }

    .yi.wai.lv {
        width: 300px;
        background-color: beige;
        border-width: 200px;
        height: 100px;
        font-size: 15px;
        display: inline-block;
    }

    .zui-3 {
        Border-color: white;
        width: 200px;
        height: 150px;
        display: inline-block;
        position: relative;
        left: 480px;
        bottom: 580px;
    }

    .wu.jun.zhi {
        width: 300px;
        background-color: beige;
        border-width: 200px;
        height: 100px;
        font-size: 15px;
        display: inline-block;
    }

    .zui-4 {
        display: inline;
        Border-color: white;
        width: 200px;
        height: 150px;
        position: relative;
        left: 750px;
        bottom: 820px;
    }

    .ma.sa.pu {
        width: 300px;
        background-color: beige;
        border-width: 200px;
        height: 150px;
        font-size: 15px;
        display: inline-block;
    }

    .xiangce {
        position: relative;
        top: -2000px;
        left: 550px;
        background-color: aqua;
        color: white;
        font-weight: 200;
        width: 200px;
    }
    
    .diyizhang .zhen {
        position: relative;
        top: -1950px;
        left:190px;
        width: 250px;
        height: 400px;
        box-shadow: 2px 7px 0px 20px #FFFFFF; /*水平距离 垂直距离 模糊半径 阴影大小 颜色；*/
    }

    .diyizhang .diyizhangwenzi.meinv {
        position: relative;
        top: 200px;
        display: inline-block;
        left: 300px;
    }

    .w {
        position: relative;
        top: -1950px;
        left:190px;
        display: inline-block;
        font-size: 50px;
        width: 120px;
    }

    .xiang-1 {
        position: relative;
        left: 600px;
        bottom: 620px;
    }

    .dierzhang .hao {
        position: relative;
        top: -1870px;
        left:-70px;
        width: 250px;
        height: 400px;
        right: 270px;
        box-shadow: 5px 10px 0px 30px #ffffff;
    }

    .dierzhang .dierzhangwenzi.zhenhao {
        position: relative;
        display: inline-block;
        width:50px;
        height:50px;
        top: 250px;
        left: 300px;
    }

    .r {
        position: relative;
        display:inline-block;
        width:120px;
        top: -1880px;
        right: 90px;
        font-size: 20px;
    }
    .d{
        position:relative;
        width:100px;
        height:100px;
        left:180px;
        top:-1950px;
    }

        .content ul {
            /* 去除标签<ul><li></li></ul>默认加的样式 */
            list-style-type: none;
        }

            .content ul > li {
                width: 400px;
                height: 200px;
               
                /* 设置绝对定位 */
                position: absolute;
                /* 设置过度效果 时间为1s */
                transition: 1s;
                /* 设置最大透明度 默认一开始图片为透明的 当下面js加载的时候
            第一张图片设置为不透明
        */
                opacity: 0;
            }

                /* 设置每个图片的样式 */
                .content ul > li img {
                    /* 设置每一张图片的大小 */
                    width: 400px;
                    height: 200px;
                    /* 设置圆角边框 */
                    border-radius: 5%;
                    /* 设置边框样式 */
                    border: 5px solid #0e0600;
                }

        /* 设置轮播图下面的小点 */
        .content ol {
            
            /* 设置相对定位 */
            position: relative;
            /* 设置网格布局 */
            display: grid;
            /* 设置网格布局中的列数及宽度 */
            grid-template-columns: repeat(3, 75px);
            /* 设置网格布局中的行数及宽度 */
            grid-template-rows: auto;
            /* 设置网格行与列之间的间隙 */
            /* 间隙为1em */
            grid-gap: 1em;
            gap: 1em;
            /* 右浮动 */
            float: right;
            /* 设置浮点的向上的内边距 */
            margin-top: 200px;
            /* 去除列表样式 */
            list-style: none;
            /* 把图像的上边缘设置在其包含元素上边缘之下0px高的位置 */
            top: 0;
            /* 把图像的左边缘设置在其包含元素上边缘之下0px高的位置 */
            left: 0;
        }
    .content {
        position: absolute;
        top: 150px;
        left: 150px;
        position:absolute;
    }
    .dot {
        position: relative;
        right:150px;
    }
            .content ol li {
                /* 设置每个小点的大小 */
                width: 25px;
                height: 10px;
                /* 设置里面的文字的大小 */
                font-size: 15px;
                /* line-height 属性设置行间的距离（行高） */
                line-height: 20px;
                /* 浮动左对齐 */
                float: left;
                /* 设置文本居中 */
                text-align: center;
                /* 把表格做成圆点 */
                border-radius: 2em;
                /* 设置圆点的边框 */
                border: 5px solid #af9d9d;
            }
</style>
<div class="dayemian">
    <div class="yemianbeijing">
        <!-- 整体框架 -->
        <div class="overall">
            <!-- 内容  -->
            <div class="content">
                <!-- 轮播图片 -->
                <ul>
                    <li><img src="~/img/1.jpg" alt=""></li>
                    <li><img src="~/img/2.jpg" alt=""></li>
                    <li><img src="~/img/微信图片_20230523204035.jpg" alt=""></li>
                </ul>
                <!-- 轮播图的点 -->
                <ol class="dot">
                    <li></li>
                    <li></li>
                    <li></li>
                </ol>
            </div>
        </div>
        <div class="head">
            @*登录跟注册*@
            <h3>欢迎抵达ETBlog</h3>
            <p>ETBlog是一个微博客，人们可以在这里发</p>
            <p>表文章，新建相册，发表评论等。</p>
            <div>
                <input type="button" src="" style="" value="注册" class="zhu" onclick="skip()" />
            </div>
            <div>
                <input type="button" src="" style="" value="登录" class="sing" onclick="bag()" />
            </div>
        </div>
    </div>
    <div>
    <div class="dibu">
        <h1 class="ta">他们正在写博客</h1>
    </div>
    <br />
    <br />
    <div class="zui-1" style="width: 18rem;">
        <div class="di">
            <h1 class="shi">史矛革之战</h1>
            <p class="zan"><br />距离孤山越来越近，矮人远征军的道路却变得<br />异常艰险。他们躲过了苍白半兽人的不懈追杀，在幽暗的密林前和甘道夫(伊恩.迈凯伦lanMckellen饰）兵分两路，后者前往多尔哥多<br />探寻索伦的动向，而霍比特人比尔博.巴金斯(马丁.费尔曼Martin.joinCFreeman饰)<br />ava&nbsp;&nbsp;&nbsp;&nbsp;test123<br />tar<br />&nbsp;&nbsp;&nbsp;2014年6月15号&nbsp;👁</p>
        </div>
        <div class="zui-2" style="width: 18rem;">
            <div class="yi">
                <h2 class="wai">意外旅程</h2>
                <p class="lv"><br />《霍比特人》的故事<br />大致发生在《魔戒》三部曲之前的60年左右，<br />讲诉弗兰德的叔叔--“霍比特人”比尔博.巴金斯的冒险历程。<br />ava&nbsp;&nbsp;test123<br />tar<br />&nbsp;&nbsp;&nbsp;2014年6月15号&nbsp;👁</p>
            </div>
        </div>
        <div class="zui-3" style="width: 18rem;">
            <div class="wu">
                <h3 class="jun">五军之战</h3>
                <p class="zhi"><br />被吵醒的史矛革大闹长湖镇，最终为人类巴德(卢克.伊万斯Luke Evans饰)射杀<br />索林橡木盾(理查德.阿米蒂奇)多年的夙愿终于实现，<br />孤山埃尔波尔重新回到矮人手中<br />ava&nbsp;&nbsp;test123<br />tar<br />&nbsp;&nbsp;&nbsp;2014年6月15号&nbsp;👁</p>
            </div>
        </div>
        <div class="zui-4" style="width: 18rem;">
            <div class="ma">
                <h4 class="sa">马萨葡萄园岛(Math's Vineyard)日记(一）</h4>
                <p class="pu"><br />真的好美呀!这种地方生活能长寿!照片没有<br />加颜色处理吧？蓝天白云的！超喜欢！你的摄影技术见长！<br />飞儿十大美女啦！完全美国范儿！以后一定去美国住一段<br />&nbsp;&nbsp;admin<br /><br />&nbsp;&nbsp;&nbsp;2014年6月15号&nbsp;👁</p>
            </div>
        </div>
    </div>
</div>
</div>
<div class="xiang">
    <div class="xiangce">
        <h2 class="xiang">相册广场</h2>
    </div>
    <div class="y">
        <div class="diyizhang" style="width: 10px;">
            <img src="~/image/1.jpg" class="zhen">
            <div class="w">
                <div class="diyizhangwenzi">
                    <h5 class="meinv">小红</h5>
                </div>
            </div>
            <div class="d">
                <button class="da" onclick="chakan()">查看大图</button>
            </div>
        </div>
    </div>
</div>
<div class="xiang-1">
    <div class="dierzhang" style="width: 10px;">
        <img src="~/image/2.jpeg" class="hao">
        <div class="r">
            <div class="dierzhangwenzi">
                <h5 class="zhenhao">林崔崔</h5>
                <h6 class="zi">自拍</h6>
                <button class="tu" onclick="chakan1()">查看大图</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    function skip() {
        //跳转注册页面
        window.location.href = "/Regs/Index";
    }
    function bag() {
        //跳转登录界面
        window.location.href = "/EDG/index";
    }
    // 当页面载入的时候加载这个函数
    window.onload = function () {

        // 获取大盒子的内容 为content的第一个元素 也就是ul中的内容
        var content = this.document.getElementsByClassName("content")[0];

        // 获取ul中的li
        var li = content.getElementsByTagName("li");

        // 函数传入两个参数，(i,j)
        function fun(i, j) {//转换图片函数，就是把透明度改了一下
            li[i].style.opacity = 1;
            li[j].style.opacity = 0;

            // 然后也把小图标的颜色改一下
            // 把图标改成白色
            // 如果图片数量发生改变 那么下面的3也要变成图片的数量
            li[i + 3].style.backgroundColor = "#ffffff";

            // 把图标改成透明
            li[j + 3].style.backgroundColor = "#00000000";
        }

        // 默认情况下轮播图为第一张
        fun(0, 1);//初始化下
        var i = 0;
        function auto() {//轮播循环函数
            i++;
            // 当数组越界的时候
            if (i >= 3) {
                // 置为0
                i = 0;
                // 然后递归重新开始
                // 这里的2位3-1的意思
                fun(0, 2);
            }
            else {
                // 反之递归
                fun(i, i - 1);
            }
        }
        // 设置变化的时间
        timer = this.setInterval(auto, 2000);

        // 设置鼠标在轮播图上的时候 轮播图就停止播放
        content.onmouseover = function () {
            //鼠标划上去，停止轮播
            clearInterval(timer);
        }

        // 设置鼠标在轮播图上的时候 轮播图就继续播放
        content.onmouseout = function () {
            //鼠标划出，继续轮播
            timer = setInterval(auto, 2000); //调用定时器
        }
        var j = 0;
        for (; j < 3; j++) {
            //点击小图标也可以转换图片
            li[j + 3].index = j;
            // 当点击小图标进行的函数
            li[j + 3].onclick = function () {
                fun(this.index, i)
                i = this.index;
            }
        }
    }
</script>


